<template>
  <div>
    <el-row>
      <el-col :span="15">
        <!--查询按钮区域-->
        <el-form :inline="true" ref="queryForm" :model="queryMap" class="demo-form-inline">
          <el-form-item label="部门名称" prop="dname">
            <el-input v-model="queryMap.dname" placeholder="部门名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query">查询</el-button>
            <el-button type="reset" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4">
        &nbsp;
      </el-col>
      <el-col :span="5">
        <!--增删改按钮-->
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus" @click="openAddDialog()">新增</el-button>
          <el-button type="primary" icon="el-icon-edit" @click="openEditDialog(key)">编辑</el-button>
          <el-button type="primary" icon="el-icon-delete" @click="deleteData(key)">删除</el-button>
        </el-button-group>
      </el-col>
    </el-row>

    <!--部门信息表格-->
    <el-table
      :data="dataList"
      border
      stripe
      :height="height"
      style="width: 100%"
      @selection-change="selectChange"
      :row-class-name="tableRowClassName"
    >
      <!--序号列-->
      <el-table-column
        type="index"
        align="center"
        label="序号"
        width="150"
        :index="indexMethod">
      </el-table-column>
      <!--全选框-->
      <el-table-column
        type="selection"
        align="center"
        width="150">
      </el-table-column>
      <el-table-column
        prop="deptno"
        align="center"
        label="编号"
        width="200">
      </el-table-column>
      <el-table-column
        prop="dname"
        align="center"
        label="名称"
        min-width="600">
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <el-pagination
      background
      class="pagination"
      layout="prev, pager, next, sizes, total"
      :total="total"
      :page-size="queryMap.limit"
      :current-page="queryMap.page"
      :page-sizes="limits"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange">
    </el-pagination>

    <dept-model ref="model"></dept-model>
  </div>
</template>

<script>
    import DeptModel from '@/components/DeptModel'
    import tableMixin from '@/mixins/tableMixin'

    export default {
        name: "DeptList",
        components: {
            DeptModel
        },
        mixins: [tableMixin],
        data() {
            return {
                //后台接口路径
                url: {
                    getDataList: 'getDeptByPage',
                    getOne: 'getDeptByDeptno',
                    delBatch: 'delDept'
                },
                //主键
                key: 'deptno'
            }
        }
    }
</script>

<style scoped>

</style>